<template>
    <view class="flex align-center border-grey round padding-base">
        <view class="flex align-center" style="width: 160rpx">
            <view class="text-xl" :class="icon"></view>
            <view class="margin-left-sm">{{ title }}</view>
        </view>

        <view style="flex: 1" class="flex align-center justify-between">
            <input :value="modelValue" style="flex:1" type="text" :placeholder="placeholder" @input="handleInput" />
            <view v-if="modelValue" @click="clear" style="width: 60rpx" class="flex justify-end">
                <view class="icon-guanbi1 text-sm"></view>
            </view>
        </view>
    </view>
</template>

<script lang="ts" setup>
import { ref, watch } from "vue";

interface inputType {
  modelValue: string, // 值
  icon?: string, // 图标
  placeholder?: string, // 文字
  title?: string, // 前缀
}
const props = withDefaults(defineProps<inputType>(), {
  modelValue: "",
  icon: "icon-wode-copy",
  placeholder: "请输入账号",
  title: "账号",
});

const emit = defineEmits(["update:modelValue", "change"]);

const handleInput = (e: any) => {
    emit("update:modelValue", e.detail.value);
    emit("change", e.detail.value);
};

const clear = () => {
    emit("update:modelValue", "");
    emit("change", "");
};
</script>

<style lang="scss" scoped></style>
